<template>
  <div id="expend-info">
    <div id="expend-info-title">
      <div class="expend-info-title">
        <img src="static/img/yellow-con.png" class="expend-info-img1">
        <img src="static/img/yellow-con.png" class="expend-info-img2">
        <img src="static/img/yellow-con.png" class="expend-info-img3">
        <img src="static/img/yellow-con.png" class="expend-info-img4">
        <img src="static/img/yellow-con.png" class="expend-info-img5">
        <img src="static/img/yellow-con.png" class="expend-info-img6">
        <img src="static/img/yellow-con.png" class="expend-info-img7">
        <img src="static/img/yellow-con.png" class="expend-info-img8">
        <img src="static/img/blue-con.png" class="expend-info-img9">
        <img src="static/img/blue-con.png" class="expend-info-img10">
        <img src="static/img/blue-con.png" class="expend-info-img11">
        <img src="static/img/blue-con.png" class="expend-info-img12">
        <span>30天内车辆支出信息展示</span>
      </div>
    </div>
    <div class="expend-button">
      <img src="static/img/corn.png" class="corn">
      <img src="static/img/corn.png" class="corn1">
      <img src="static/img/corn.png" class="corn2">
      <img src="static/img/corn.png" class="corn3">
      <img src="static/img/corn.png" class="corn4">
      <div class="total-sum">
        <div class="total">合计</div>
        <div class="sum">{{oil + ticket + maintenance + service + crossroad}}</div>
      </div>
      <div id="expend-info-chart"></div>
      <div class="item-type">
        <div class="item1">
          <div class="diff-color1">项目</div>
          <div>油耗</div>
          <div>罚单</div>
          <div>保养</div>
          <div>维修</div>
          <div>保险</div>
        </div>
        <div class="item2">
          <div class="diff-color2">数量</div>
          <div>{{oil}}(L)</div>
          <div>{{ticket}}(次)</div>
          <div>{{maintenance}}(次)</div>
          <div>{{service}}(次)</div>
          <div>{{crossroad}}(次)</div>
        </div>
        <div class="item3">
          <div class="diff-color3">金额(元)</div>
          <div>{{price1}}</div>
          <div>{{price2}}</div>
          <div>{{price3}}</div>
          <div>{{price4}}</div>
          <div>{{price5}}</div>
        </div>
        <!--<div class="oil">油耗：{{oil}}</div>-->
        <!--<div class="ticket">罚单：{{ticket}}</div>-->
        <!--<div class="maintenance">保养：{{maintenance}}</div>-->
        <!--<div class="service">维修：{{service}}</div>-->
        <!--<div class="crossroad">过路：{{crossroad}}</div>-->
        <!--<div class="parking">停车</div>-->
        <!--<div class="insurance">保险</div>-->
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    name: 'expend-info',
    data() {
      return {
        oil : 100,
        ticket : 200,
        maintenance : 300,
        service : 400,
        crossroad : 500,
        timeList : 1513645200000,
        price1: 100,
        price2: 100,
        price3: 100,
        price4: 100,
        price5: 100
      }
    },
    mounted() {
      this.drawPie();
      this.changeTimeList()
    },
    methods: {
      drawPie: function () {
        let pieChart = echarts.init(document.getElementById('expend-info-chart'));
        pieChart.setOption({
//          backgroundColor: '#0B2121',
          color:['#0F637B','#2E90A6','#55BBC3','#7AE9E5'],
          title: {},
          tooltip: {},
          series: [
            {
              name:'访问来源',
              type:'pie',
              radius : '55%',
              center: ['50%', '50%'],
              data:[
                {value:310, name:'邮件'},
                {value:274, name:'联盟'},
                {value:235, name:'视频'},
                {value:400, name:'搜索'}
              ].sort(function (a, b) { return a.value - b.value; }),
              roseType: 'radius',
              label: {
                normal: {
                  show:true ,
                  textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                },
                emphasis:{
                  show :true
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                }
              },
              itemStyle: {
                normal: {
                  labelLine: {
                    show:false,
                    length:1
                  },
//                  color: '#c23531',
                  shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },

              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        });
        var count = [];
        var price = [];

        $.ajax({
          type : 'get',
          async : true,
          url: 'http://203.81.245.37:2420/platformservice/left/' +this.timeList ,
          data :{},
          dataType : 'json',
          success : (result) => {
            if (result) {
              let result_carpay = result.carpay;
//              console.log(result_carpay);
              for (var k=0;k<result_carpay.length;k++) {
                count.push(result_carpay[k].count)
              }
              for (var k=0;k<result_carpay.length;k++) {
                price.push(result_carpay[k].price)
              }
              const count2 = count[1] + count[4];
              const count1 = [count2,count[3],count[2],count[0]];
              const count3 = ["其他","维修","保养","油耗"];
//              console.log(count);
              this.oil = count[0];
              this.ticket = count[1];
              this.maintenance = count[2];
              this.service = count[3];
              this.crossroad = count[4];
              this.price1 = price[0];
              this.price2 = price[1];
              this.price3 = price[2];
              this.price4 = price[3];
              this.price5 = price[4];
              pieChart.setOption({
                series: [{
                  data: [{
                    value : count1[0],
                    name : count3[0]
                  },
                    {
                      value : count1[1],
                      name : count3[1]
                    },
                    {
                      value : count1[2],
                      name : count3[2]
                    },
                    {
                      value : count1[3],
                      name : count3[3]
                    }
                  ]
                }]
              })
            }
          }
        })
      },
      changeTimeList : function () {
        var timeList = [1514422800000,1514336400000,1514250000000,1514163600000,1514077200000,1513990800000,1513904400000,1513818000000,1513731600000,1513645200000];
        var j = 0;
        setInterval( () => {
          this.timeList = timeList[j];
//          console.log(timeList[j]);
          if (j < timeList.length-1){
            j+=1;
          }else {
            j = 0;
          }
          this.drawPie();
        },60000)
      }
    }
  }
</script>

<style>
  #expend-info {
    height: 260px;
    width: 440px;
    position:relative;
  }
  #expend-info-title {
    height: 40px;
    width: 438px;
    background: rgba(7, 34, 31, 0.8);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(32, 221, 201, 0.8);
    border-image: initial;
  }
  .expend-info-title {
    height: 30px;
    width: 428px;
    position: absolute;
    top: 6px;
    left: 6px;
    font-family: MicrosoftYaHeiUI;
    text-align: left;
    text-indent: 4px;
    font-size: 18px;
    line-height: 30px;
    color: rgb(239, 187, 66);
    letter-spacing: -0.45px;
    background: rgba(0, 158, 158, 0.2);
  }
  .expend-button {
    height: 217px;
    width: 438px;
    border: 1px solid rgba(32,221,201,0.80);
    background: rgba(7,34,31,0.80);
  }
  .total-sum {
    position: absolute;
    background: #043838;
    height: 30px;
    width: 200px;
    top: 230px;
    left: 20px;
    line-height: 30px;
  }
  .total {
    font-family: MicrosoftYaHeiUI;
    font-size: 14px;
    color: #50FFF9;
    letter-spacing: -0.35px;
    height: 30px;
    width: 100px;
    position: absolute;
  }
  .sum {
    font-family: MicrosoftYaHeiUI;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: -0.35px;
    height: 30px;
    width: 100px;
    position: absolute;
    left: 100px;
  }
  #expend-info-chart {
    height: 217px;
    width: 219px;
    /*background: rgba(7,34,31,0.80);*/
    /*border: 1px solid rgba(32,221,201,0.80);*/
  }
  .item-type {
    position: absolute;
    left: 290px;
    top: 50px;
  }
  .item1 {
    position: absolute;
    height: 204px;
    width: 28px;
    font-family: MicrosoftYaHeiUI;
    font-size: 14px;
    color: #50FFF9;
    letter-spacing: -0.35px;
    line-height: 34px;
  }
  .item2 {
    position: absolute;
    left: 33px;
    height: 204px;
    width: 46px;
    font-family: MicrosoftYaHeiUI;
    font-size: 12px;
    color: #50FFF9;
    letter-spacing: -0.3px;
    line-height: 34px;
  }
  .item3 {
    position: absolute;
    left: 80px;
    height: 204px;
    width: 43px;
    font-family: MicrosoftYaHeiUI;
    font-size: 12px;
    color: #50FFF9;
    letter-spacing: -0.3px;
    line-height: 34px;
  }
  .diff-color1 {
    color: #EFBB42;
  }
  .diff-color2 {
    color: #EFBB42;
  }
  .diff-color3 {
    color: #EFBB42;
  }
  .corn {
    position: absolute;
    top: 96px;
    left: 270px;
  }
  .corn1 {
    position: absolute;
    top: 130px;
    left: 270px;
  }
  .corn2 {
    position: absolute;
    top: 164px;
    left: 270px;
  }
  .corn3 {
    position: absolute;
    top: 198px;
    left: 270px;
  }
  .corn4 {
    position: absolute;
    top: 231px;
    left: 270px;
  }
  .expend-info-img1 {
    position: absolute;
    top: -7px;
    left: -7px;
    z-index: 3;
  }
  .expend-info-img2 {
    position: absolute;
    top: -7px;
    left: 429px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .expend-info-img3 {
    position: absolute;
    top: 32px;
    left: 429px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .expend-info-img4 {
    position: absolute;
    top: 32px;
    left: -7px;
    transform: rotate(270deg);
    z-index: 3;
  }
  .expend-info-img5 {
    position: absolute;
    top: 35px;
    left: -7px;
    z-index: 3;
  }
  .expend-info-img6 {
    position: absolute;
    top: 35px;
    left: 429px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .expend-info-img7 {
    position: absolute;
    top: 250px;
    left: 429px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .expend-info-img8 {
    position: absolute;
    top: 250px;
    left: -7px;
    transform: rotate(270deg);
    z-index: 3;
  }
  .expend-info-img9 {
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 3;
  }
  .expend-info-img10 {
    position: absolute;
    top: -1px;
    left: 425px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .expend-info-img11 {
    position: absolute;
    top: 27px;
    left: 425px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .expend-info-img12 {
    position: absolute;
    top: 27px;
    left: -1px;
    transform: rotate(270deg);
    z-index: 3;
  }
</style>
